import React from 'react';
import { Button, List, Radio, NavBar, Icon, WingBlank, WhiteSpace } from 'antd-mobile';
import './PayOrder.css'

const RadioItem = Radio.RadioItem;


class PayOrder extends React.Component {
    constructor(props){
        super(props)
        this.state={
            time:''
        }
    }
    componentDidMount = () => {
		this.countDown(900);//倒计时时间可随意调整，且可读性强
    };
	countDown = (waitTime) => {
        if (waitTime > 0) {
            waitTime--;
           this.setState({
               time:`${parseInt(waitTime/60)}:${parseInt(waitTime%60)}`
           })
        } else {
            this.props.history.push('/Home')
            return;
        }
        setTimeout(() => {
            this.countDown(waitTime);
        }, 1000);
	}
    WingBlankExample = () => (
        <div style={{ padding: '15px 0' }}>
            <WingBlank className='top'>
                <div>支付剩余时间 {this.state.time}</div>
                <div>￥25.00</div>
                <div>
                    <span>肯德基宅急送(基泰卢店)</span>
                    <span>订单详情 ＞</span>
                </div>
            </WingBlank>
            <WhiteSpace size="lg" />
            <WingBlank className='center'>
                <h2>请选择支付方式</h2>
                <Test></Test>
            </WingBlank>
            <WhiteSpace size="lg" />
            <div className='confirm'>
                <Button type="primary" onClick={() => { this.props.history.push('/Home/PayOver') }}>确认支付</Button><WhiteSpace />
            </div>
        </div>
    );
    render() {
        return (
            < div >
            <NavBar
                style={{ backgroundColor: 'orange', color: 'white' }}
                mode="light"
                icon={<Icon type="left" onClick={() => { this.props.history.push('/Home/SubOrder') }} />}
                onLeftClick={() => console.log('onLeftClick')}
            // rightContent={[
            //     <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
            //     <Icon key="1" type="ellipsis" />,
            // ]}
            >支付订单</NavBar>
                { this.WingBlankExample() }
            </div >
        );
    }
}

class Test extends React.Component {
    state = {
        value: 0,
        value2: 0,
        value3: 0,
        value4: 0,
    };
    onChange = (value) => {
        console.log('checkbox');
        this.setState({
            value,
        });
    };

    render() {
        const { value } = this.state;
        const data = [
            { value: 0, label: '中国农业银行储蓄卡' },
            { value: 1, label: '交通银行储蓄卡' },
            { value: 2, label: '微信支付' },
            { value: 3, label: '支付宝支付' },
        ];
        //   const data2 = [
        //     { value: 0, label: 'basketball', extra: 'details' },
        //     { value: 1, label: 'football', extra: 'details' },
        //   ];

        return (<div className='way'>
            <List>
                {data.map(i => (
                    <RadioItem key={i.value} checked={value === i.value} onChange={() => this.onChange(i.value)}>
                        {i.label}
                    </RadioItem>
                ))}
            </List>
        </div>);
    }
}

export default PayOrder;